import {View, StyleSheet, TextInput} from 'react-native';
import {useRef,useEffect} from "react";

export default function TextInputDemo() {
  const inputRef = useRef(null);

  useEffect(() => {
    setTimeout(() => {
      inputRef.current.focus();
      // inputRef.current.blur();//失去焦点
    }, 2000);
  }, []);
  return (
      <View style={styles.container}>
        <TextInput
            ref={inputRef}
            style={styles.input}
            // autoFocus={true}//自动聚焦
            //blurOnSubmit={true}//提交后失去焦点
            //caretHidden={false}//隐藏光标，不常用
            defaultValue="哈哈"
            keyboardType="default"//default默认,numeric数字，email-address,phone-pad老键盘九宫格
            returnKeyType='go'//右下角大按键图标search放大镜，send发送，done，next，go
            maxLength={20}
            // multiline={true}//允许多行输入,与加密输入冲突
            secureTextEntry={true}
            numberOfLines={2}//只显示两行，其他隐藏
            onFocus={() => {
              console.log('onfocus');
            }}
            onBlur={() => {
              console.log('onblur');
            }}
            onChange={(e) => {
              console.log(e.nativeEvent);
            }}
            onChangeText={(e) => {
              console.log(e);
            }}
            // selection={{start:0, end:1}}//自动选择输入框内【）的字符
            selectionColor='red'//选中的颜色
            selectTextOnFocus={true}//自动全选
        />

      </View>
  );
}
const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flex:1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input:{
    textAlign:"center",
    textAlignVertical:"center",
    width: 300,
    height:40,
    backgroundColor:'#E0E0E0',
    fontWeight:"bold"
  }

});

